$attrs: (
  "m": "margin",
  "p": "padding"
);
$directions: (
  "t": "top",
  "b": "bottom",
  "l": "left",
  "r": "right",
  "x": "left" "right",
  "y": "top" "bottom"
);

@each $shortattr, $attr in $attrs {
  @for $gap from 0 to 6 {
    @each $shortdirection, $direction in $directions {
      @if $shortdirection == "x" or $shortdirection == "y" {
        .#{$shortattr}#{$shortdirection}-#{$gap} {
          @each $item in $direction {
            #{$attr}-#{$item}: $gap * 2px !important;
          }
        }
      } @else {
        .#{$shortattr}#{$shortdirection}-#{$gap} {
          #{$attr}-#{$direction}: $gap * 2px !important;
        }
      }
    }
    .#{$shortattr}-#{$gap} {
      #{$attr}: $gap * 2px !important;
    }
  }
}

.w-100 {
  width: 100%;
}
.h-100 {
  height: 100%;
}

#root {
  @extend .w-100;
  @extend .h-100;
}

.no-select {
  user-select: none;
}

.d-flex {
  display: flex;
}

.flex-full {
  flex: 1;
}
